(function($f) { $f.extend.app("5f70f2dc-baeb-40f1-a335-ed6e05ee82f4", function(self) {

	"use strict";

	// plugin info
	this.info = {
		// title of the plugin
		title: "My Application",
		version: "0.0.1", // major.minor.build
		description: "This is my application."
	};

	// plugin state (contents here-in must be JSON serializable)
	// if items are defined here, these will be preserved across page refresh (by 
	// serializing/deserializing transparently)
	this.state = {  
		appVar1: 1,		
		appVar2: Date.now(),
		appVar3: "app String",
		appVar4: false
	};
	
	// on after navigation is completed and everything is ready 
	// and focus is set on main screen this is last place in 
	// navigation cycle
	// returns (void):
	this.onReadyAll = function() { 
		// show list
		self.stateItemsList();
	};
	
	// check
	this.checkInStates = function() {
		// read from UI
		var name = $("#stateVariableName")[0].value;
		
		// check in states and write
		$("#isStateVariableAvailable")[0].value = ($f.states.has(name) ? "Yes" : "No");
	};
	
	// write to states
	this.writeToStates = function() {
		// read from UI
		var name = $("#stateVariableName")[0].value;
		var value = $("#stateVariableDefinedValue")[0].value;
		
		// write to states
		$f.states.set(name, value);
		
		// show list
		self.stateItemsList();
	};

	// remove from states
	this.removeFromStates = function() {
		// read from UI
		var name = $("#stateVariableName")[0].value;
		
		// remove from states
		$f.states.set(name, null);
		
		// show list
		self.stateItemsList();
	};
	
	// read from states
	this.readFromStates = function() {
		// read from session
		var name = $("#stateVariableName")[0].value;
		var value = $f.states.get(name);
		if (isNull(value)) {
			value = "(not found)";
		};
		
		// write to UI
		$("#stateVariableReadValue")[0].value = value;
	};
	
	// clear
	this.clearStates = function() {
		// clear states
		$f.states.clear();
		
		// show list
		self.stateItemsList();
	};
	
	// show list
	this.stateItemsList = function() {
		var div = $("#stateItems");

		// state items list
		var count = "Total " + $f.states.count().toString() + " items.<br /><br />";
		var list = "<table class='table table-bordered'><tr><th align='left'>Name</th><th align='left'>Scoped Name</th><th align='left'>Value</th></tr>";
		var value = "";
		var isFirst = false;
		var v1 = "";
		$.each($f.states.items(), function(i, item) {
			value = $f.states.get(item);
			if (isNull(value)) {
				value = "(not found)";
				list += "<tr><td style='vertical-align: top'>" + item + 
						"</td><td>" + "" + 
						"</td><td>" + value + 
						"</td></tr>";
			} else if (isLiteral(value)) {
				isFirst = true;
				$.each(value, function(k, v) {
					v1 = (isLiteral(v) ? JSON.stringify(v) : v);
					list += "<tr><td style='vertical-align: top'>" + (isFirst ? item : "") +  
						    "</td><td>" + k + 
							"</td><td>" + v1 + 
							"</td></tr>";
					isFirst = false;
				});
			} else {
				list += "<tr><td style='vertical-align: top'>" + item + 
						"</td><td>" + "" + 
						"</td><td>" + value + 
						"</td></tr>";
			};
		});
		list += "</table>";
		div.empty().append(count + list);		
	};
}); }(fluid));